<template>
    <div class="">
        <!-- 表单,要求有: 标题，概述，封面图-->
        <el-form label-position="top" class="post-upload-form" :model="form">
            <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="概述" prop="summary">
                <el-input
                    type="textarea"
                    :rows="3"
                    v-model="form.summary"
                    height="200px"
                    placeholder="请输入帖子的概述"
                ></el-input>
            </el-form-item>
            <el-form-item label="正文" prop="summary">
                <el-input
                    type="textarea"
                    :rows="3"
                    v-model="form.body"
                    height="200px"
                    placeholder="请输入帖子的正文"
                ></el-input>
            </el-form-item>
            <el-form-item label="封面图" prop="coverImage">
                <el-upload
                    class="avatar-uploader"
                    :show-file-list="false"
                    >
                    <!-- :on-success="handleUploadSuccess" -->
                    <img v-if="form.coverImage != null && form.coverImage !== ''" :src="form.coverImage" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                  </el-upload>
            </el-form-item>
            <el-form-item label="帖子类型" prop="type">
                <el-select v-model="form.type" placeholder="请选择帖子类型" style="width: 100%;">
                    <el-option label="游戏讨论" value="game-discussion"></el-option>
                    <el-option label="攻略分享" value="strategy-sharing"></el-option>
                    <el-option label="问题求助" value="help-request"></el-option>
                    <el-option label="资源下载" value="resource-download"></el-option>
                    <el-option label="其他" value="other"></el-option>
                </el-select>
            </el-form-item>
            <!-- 标签，可自定义 -->
             <el-form-item label="标签" prop="tags">
                <el-input-tag v-model="form.tags" trigger="Enter" :max="3" placeholder="请输入标签" />
             </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { useHead } from 'nuxt/app';
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue';

useHead({
  title: "社区 - 上传帖子",
});

const form = ref({
  title: '',
  summary: '',
  coverImage: null,
  body: '',
  type: '',
  tags: [],
});

// 重置表单
const resetForm = () => {
  form.value = {
    title: '',
    summary: '',
    coverImage: null,
    body: '',
    type: '',
    tags: [],
  };
};

// 提交表单
const submitForm = () => {
  alert('表单已提交！');
};
</script>

<style scoped>
.post-upload-form {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #ffffff;
}
.cover-image-preview {
  margin-top: 10px;
}
.cover-image-preview img {
  max-width: 100%;
  border-radius: 4px;
}
.avatar-uploader {
  border: 1px solid #dadada;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>